<template>
  <view class="service">
    <view
      class="service_item"
      v-for="(item, index) of list"
      :key="index"
      @tap="onDetail(item)"
    >
      <image :src="item._picurl" mode="widthFix" />
      <view class="service_item--content">
        <view class="title">{{ item.domesticServiceTitle }}</view>
        <view class="margin-tb-sm price text-price">
          <text class="text-xl">{{ item.showPrice }}</text>
          <text class="text-sm margin-left-xs">起</text>
        </view>
        <view>{{ item.commentsNumber }}条评价</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import { jumpPage as $jump } from "../../../utils/route/route";
const $emit = defineEmits([""]);
const $props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});
const onDetail = (e) => {
  $jump({
    to: "/package-service/pages/index",
    login: false,
    query: {
      id: e.domesticServiceId,
    },
  });
};
</script>

<style lang="scss" scoped>
.service {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &_item {
    width: 46%;
    background: #ffffff;
    border-radius: 0 0 20rpx 20rpx;
    margin-bottom: 30rpx;
    image {
      width: 100%;
      max-height: 360rpx;
      border-radius: 20rpx 20rpx 0 0;
    }
    &--content {
      padding: 30rpx;
      .title {
        font-size: 34rpx;
      }
      .price {
        color: #00adad;
      }
    }
  }
}
</style>
